<!DOCTYPE html>
<html lang="en">
<head>
    <title>交易结算设置</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <script type="text/javascript">

       layui.use(['element', 'form', 'table', 'layer', 'laydate'], function () {
           var layer = layui.layer;
           var $ = layui.$;
           var table = layui.table;
           var form = layui.form;
           var laydate = layui.laydate;

           //执行一个laydate实例
           laydate.render({
               elem: '#start' //指定元素

           });
           //未结算表格数据
           table.render({
               elem: '#userTable',
               url: 'selectTaDealingBalance',
               page: true,
               height: 'full-30',
               cellMinWidth:80,
               toolbar:'#userToolBar',
               cols: [
                   [
                       {type: 'checkbox', fixed: 'left'}
                       , {field: 'fundId', title: '基金',  align: 'center'}
                       , {field: 'TAId', title: 'TA交易编号',  align: 'center'}
                       , {field: 'cashId', title: '现金账户', align: 'center'}
                       , {field: 'dealPrice', title: '单价',  align: 'center'}
                       , {field: 'dealNumber', title: '数量',  align: 'center'}
                       , {field: 'dealMoney', title: '总金额',align: 'center'}
                       , {field: 'dealTime', title: '交易日期',  align: 'center'}
                       , {field: 'dealWay', title: '类型',  align: 'center'}
                       , {fixed: 'right',field: 'dealState', title: '状态', align: 'center'}
                   ]
               ]
           });


           //已结算表格数据
           table.render({
               elem: '#userTable2',
               url: '../TaSettlement/selectTaSettlement?status=1',
               page: true,
               height: 'full-30',
               cellMinWidth:80,
               toolbar:'#userToolBar2',
               cols: [
                   [ //表头
                       {type: 'checkbox', fixed: 'left'}
                       , {field: 'fundId', title: '基金',  align: 'center'}
                       , {field: 'taTransactionId', title: 'TA交易编号',  align: 'center',hidden:true}
                       , {field: 'accountId', title: '现金账户', align: 'center'}
                       , {field: 'price', title: '单价',  align: 'center'}
                       , {field: 'fundNum', title: '数量',  align: 'center'}
                       , {field: 'totalMoney', title: '总金额',align: 'center'}
                       , {field: 'dateTime', title: '交易日期',  align: 'center'}
                       , {
                       field: 'transactionType', title: '类型',  align: 'center', templet: function (item) {
                           if (item.transactionType == '1') {
                               return '认购';
                           } else if (item.transactionType == '2') {
                               return '申购';
                           } else if (item.transactionType == '3') {
                               return '赎回';
                           }
                       }
                   }
                       , {
                       fixed: 'right',field: 'transactionStatus', title: '状态', align: 'center', templet: function (item) {
                           if (item.transactionStatus == '1') {
                               return "<span style='color: green'>已结算</span>";
                           } else if (item.transactionStatus == '0') {
                               return "<span style='color: red'>未结算</span>";
                           }
                       }
                   }
                   ]
               ]
           });
           table.on('toolbar(userTable)', function (obj) {

               switch (obj.event) {
                   case "search":
                       //获得选中的对象
                       var checkStatus = table.checkStatus("userTable"); //idTest 即为基础参数 id 对应的值
                       // 其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID）

                       var dataArr = checkStatus.data; //获取选中行的数据
                       var settlement=JSON.stringify(dataArr);
                       if (dataArr.length == 0) {
                           layer.msg("请先选中数据");
                       }
                       else {
                           layer.confirm('真的要结算嘛', function () {
                               // alert(settlement)
                               //向服务端发送结算指令
                               $.post("../TaSettlement/updateTaSettlement","settlement="+settlement,function(msg){
                                   if(msg>0){
                                       table.reload('userTable');
                                       table.reload('userTable2');  /!*渲染刷新*!/
                                       layer.closeAll();
                                       layer.msg('结算成功',{
                                           title : '提示',
                                           area : [ '200px',
                                               '140px' ],
                                           btn : [ '知道了' ]
                                       });
                                   }
                                   else{
                                       layer.closeAll();
                                       layer.msg('结算失败',{
                                           title : '提示',
                                           area : [ '200px',
                                               '140px' ],
                                           btn : [ '知道了' ]
                                       });
                                   }
                               });
                               return false;
                           });
                       }
                       break;
                   case 'select':
                       var dateTime= $("#start").val();
                       var transactionType= $("#transactionType").val();
                       //表格的重新加载事件
                       table.reload('userTable', {
                           method: 'post'
                           , where: {
                               'dateTime': dateTime,
                               'transactionType': transactionType
                           }
                           , page: {
                               curr: 1
                           }
                       });
                       laydate.render({
                           elem: '#start' //指定元素

                       });
                       break;
               };
           });
           //给工具条的结算添加事件
           table.on('toolbar(userTable)', function (obj) {
               switch (obj.event) {
                   case "search":
                       //获得选中的对象
                       var checkStatus = table.checkStatus("userTable"); //idTest 即为基础参数 id 对应的值
                       // 其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID）

                       var dataArr = checkStatus.data; //获取选中行的数据
                       var settlement=JSON.stringify(dataArr);
                       if (dataArr.length == 0) {
                           layer.msg("请先选中数据");
                       }
                       else {
                           layer.confirm('真的要结算嘛', function () {
                               //向服务端发送结算指令
                               $.post("../TaSettlement/updateTaSettlement","settlement="+settlement,function(msg){
                                   if(msg>0){
                                       table.reload('userTable');
                                       table.reload('userTable2');  /!*渲染刷新*!/
                                       layer.closeAll();
                                       layer.msg('结算成功',{
                                           title : '提示',
                                           area : [ '200px',
                                               '140px' ],
                                           btn : [ '知道了' ]
                                       });
                                   }
                                   else{
                                       layer.closeAll();
                                       layer.msg('结算失败',{
                                           title : '提示',
                                           area : [ '200px',
                                               '140px' ],
                                           btn : [ '知道了' ]
                                       });
                                   }
                               });
                               return false;
                           });
                       }
                       break;
                   case 'select':
                       var dateTime= $("#start").val();
                       var transactionType= $("#transactionType").val();
                       //表格的重新加载事件
                       table.reload('userTable', {
                           method: 'post'
                           , where: {
                               'dateTime': dateTime,
                               'transactionType': transactionType
                           }
                           , page: {
                               curr: 1
                           }
                       });
                       laydate.render({
                           elem: '#start' //指定元素

                       });
                       break;
               };
           });

           //给工具条的反结算添加事件
           table.on('toolbar(userTable2)', function (obj) {
               switch (obj.event) {
                   case "search2":
                       //获得选中的对象
                       var checkStatus = table.checkStatus("userTable2"); //idTest 即为基础参数 id 对应的值
                       // 其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID）
                       var dataArr = checkStatus.data; //获取选中行的数据
                       var settlement = JSON.stringify(dataArr);
                       if (dataArr.length == 0) {
                           layer.msg("请先选中数据");
                       } else {
                           layer.confirm('真的要反结算嘛', function () {
                               layer.close();
                               //向服务端发送删除指令
                               $.post("../TaSettlement/updateTaSettlementTwo", "settlement=" + settlement, function (msg) {
                                   if (msg > 0) {
                                       table.reload('userTable2');
                                       table.reload('userTable');  /*渲染刷新*/
                                       layer.closeAll();
                                       layer.msg('反结算成功', {
                                           title: '提示',
                                           area: ['200px',
                                               '140px'],
                                           time: 0,
                                           btn: ['知道了']
                                       });
                                   } else {
                                       layer.closeAll();
                                       layer.msg('反结算失败', {
                                           title: '提示',
                                           area: ['200px',
                                               '140px'],
                                           time: 0,
                                           btn: ['知道了']
                                       });
                                   }
                               });
                               return false;
                           });
                       }
                       break;
               }

           });
       })
   </script>
</head>

<body>

<!--结算表头-->
<script type="text/html" id="userToolBar">
    <div style="margin-top: 0px;margin-left: 0px" >
        <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
                <label class="layui-form-label" style="width: 110px;text-align: center">成交日期</label>
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input"  autocomplete="off" placeholder="请输入成交日期" name="dateTime" id="start">
                </div>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <label class="layui-form-label" style="width: 110px;text-align: center">交易方式</label>

                <div class="layui-inline layui-show-xs-block">
                    <select name="transactionType" id="transactionType">
                        <option value="">请选择</option>
                        <option value="1">认购</option>
                        <option value="2">申购</option>
                        <option value="3">赎回</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn layui-btn-primary"  lay-submit=""  lay-event="select" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn" type="button" onclick=" return false" lay-submit="settlement" lay-filter="search" lay-event="search" name="settlement" id="settlement" >结算</button>
            </div>
        </form>
        <ul class="layui-tab-title" style="border-bottom-color: #009688">
            <li class="layui-this" lay-id="1">未结算</li>
            <li lay-id="2">已结算</li>
        </ul>
    </div>
</script>

<!--反结算表头-->
<script type="text/html" id="userToolBar2">
    <div style="margin-top: 0px;margin-left: 0px" >
        <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
                <label class="layui-form-label" style="width: 110px;text-align: center">成交日期</label>
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input"  autocomplete="off" placeholder="请输入成交日期" name="dateTime" id="start1">
                </div>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <label class="layui-form-label" style="width: 110px;text-align: center">交易方式</label>
                <div class="layui-inline layui-show-xs-block">
                    <select name="transactionType" id="transactionType2">
                        <option value="">请选择</option>
                        <option value="1">认购</option>
                        <option value="2">申购</option>
                        <option value="3">赎回</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn layui-btn-primary"  lay-submit="" lay-event="select" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn" type="button" onclick="return false"  lay-submit="settlement" lay-filter="search2" lay-event="search2" name="settlement" id="settlement1" >反结算</button>
            </div>
        </form>
        <ul class="layui-tab-title" style="border-bottom-color: #009688">
            <li class="layui-this" lay-id="1">未结算</li>
            <li lay-id="2">已结算</li>
        </ul>
    </div>
</script>

<!--渲染表格层-->
<div class="layui-tab" lay-filter="test">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <!--表格-->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
        <div class="layui-tab-item">
            <table id="userTable2" lay-filter="userTable2"></table>
        </div>
    </div>
</div>


<!--<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        //反结算和结算按钮
        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
            var submit = $(this).attr('lay-id')
            if (submit == '2'){
                $('#settlement').html("反结算")
            }
            if (submit == '1'){
                $('#settlement').html("结算")
            }
        });
    });
</script>-->
</body>
</html>